import React, { useState, useEffect } from 'react';
import './qjx_j.css';
import { useNavigate } from "react-router-dom";
import { LeftOutline } from 'antd-mobile-icons';
import axios from 'axios';

// 模拟关注的医生数据
const followedDoctors = [
  {
    id: 1,
    name: '张正华',
    department: '皮肤科',
    title: '副主任医师',
    hospital: '复旦大学附属华山医院',
    isFollowed: true
  },
  {
    id: 2,
    name: '张正华',
    department: '皮肤科',
    title: '副主任医师',
    hospital: '复旦大学附属华山医院',
    isFollowed: true
  },
  {
    id: 3,
    name: '张正华',
    department: '皮肤科',
    title: '副主任医师',
    hospital: '复旦大学附属华山医院',
    isFollowed: true
  },
  {
    id: 4,
    name: '张正华',
    department: '皮肤科',
    title: '副主任医师',
    hospital: '复旦大学附属华山医院',
    isFollowed: true
  }
];

const DoctorItem = ({ doctor }) => {
  return (
    <div className="doctor-item">
      <div className="doctor-avatar-container">
        <div className="doctor-avatar">
          <img src="123.png" alt={`${doctor.name}头像`} />
        </div>
        <div className="follow-status">{doctor.isFollowed? '已关注' : '未关注'}</div>
      </div>
      <div className="doctor-info">
        <h3>{doctor.name}</h3>
        <p>{doctor.department} {doctor.title}</p>
        <div className="hospital-info">
          <span className="tag">三甲</span>
          <span>{doctor.hospital}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
    const navigate = useNavigate();
  return (
    <div className="App">
       <div className='y_one'> {/* 修正类名拼写 */}
                      <p style={{
                          marginTop: '3px'
                      }} onClick={() => navigate('/home/mind')}><LeftOutline fontSize={24} /></p>
                      <h2>我的关注</h2>
                  </div>
      {followedDoctors.map(doctor => (
        <DoctorItem key={doctor.id} doctor={doctor} />
      ))}
    </div>
  );
}

export default App;